<!--开票信息-->
<template>
  <view class="" style="padding-bottom: 40rpx">
    <view class="uni-card paddingL15 cardContent">
      <view class="row title" style="justify-content: flex-start">
        <view style="width: 5px;height: 18px;border-radius: 8rpx;background: #488AFD;margin-right: 20rpx"></view>
        <text style="font-weight: 500">前十供应商信息（近三年）</text>
      </view>
      <view class="tanTable" v-show="tenType" style="position: relative">
        <view v-if="isDemo != ''" style="position:absolute;z-index: 9;left: 50%;top: 50%;transform: translate(-50%,-50%)">
          <image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
        </view>
        <tableData :tableTitleData="areartableData" >
          <view style="display: flex" class="data-row" v-for="(item, index) in tenTable" :key="index">
            <view :style="{width: (100 / areartableData.length) + '%'}" class="data-cell">{{ item.sort }}</view>
            <view :style="{width: (100 / areartableData.length) + '%'}" class="data-cell" style="justify-content: flex-start">{{ item.buySaleName }}</view>
            <view :style="{width: (100 / areartableData.length) + '%'}" class="data-cell">{{ item.sumAmount > 0 ? `${$p(item.sumAmount)}` : '0'  }}</view>
            <view :style="{width: (100 / areartableData.length) + '%'}" class="data-cell">{{ item.amountRate > 0 ? `${$p(item.amountRate)}%` : '0'  }}</view>
            <view :style="{width: (100 / areartableData.length) + '%'}" class="data-cell">{{ item.relatedStatus ? '是' : '否' }}</view>
          </view>
          <view v-if="tenTable.length==0" style="text-align: center;line-height: 100rpx;height: 100rpx;font-size: 26rpx;color: #888888">
            暂无数据
          </view>
        </tableData>
      </view>
    </view>
    <view class="uni-card paddingL15 cardContent">
      <view class="row title" style="justify-content: flex-start">
        <view style="width: 5px;height: 18px;border-radius: 8rpx;background: #488AFD;margin-right: 20rpx"></view>
        <text style="font-weight: 500">前十销售客户信息（近三年）</text>
      </view>
      <view class="tenCusTable" v-show="tenCusType" style="position: relative">
        <view v-if="isDemo != ''" style="position:absolute;z-index: 9;left: 50%;top: 50%;transform: translate(-50%,-50%)">
          <image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
        </view>
        <tableData :tableTitleData="tenCusData" >
          <view style="display: flex" class="data-row" v-for="(item, index) in tenCustable" :key="index">
            <view :style="{width: (100 / tenCustable.length) + '%'}" class="data-cell">{{ item.sort }}</view>
            <view :style="{width: (100 / tenCustable.length) + '%'}" class="data-cell" style="justify-content: flex-start">{{ item.buySaleName }}</view>
            <view :style="{width: (100 / tenCustable.length) + '%'}" class="data-cell">{{ item.sumAmount > 0 ? `${$p(item.sumAmount)}` : '0'  }}</view>
            <view :style="{width: (100 / tenCustable.length) + '%'}" class="data-cell">{{ item.amountRate > 0 ? `${$p(item.amountRate)}%` : '0'  }}</view>
            <view :style="{width: (100 / tenCustable.length) + '%'}" class="data-cell">{{ item.relatedStatus ? '是' : '否' }}</view>
          </view>
          <view v-if="tenCustable.length==0" style="text-align: center;line-height: 100rpx;height: 100rpx;font-size: 26rpx;color: #888888">
            暂无数据
          </view>
        </tableData>
      </view>
    </view>
    <loading :show="loading"></loading>
  </view>
</template>

<script>
import tableData from "@/components/tableData.vue";
import {gegetEnterpriseInvoiceTopTenApi} from '@/api/user'
import {getTableWidth} from "@/utils/date";
import {shoperInfo} from '../../options'
export default {
  components: {
    tableData
  },
  data () {
    return {
      invoiceList: {},
      taxType: true,
      taxtable: [],
      taxtableWidth: '',
      violationType: true,
      chartData: {},
      tableData: [],

      tenType: true,
      tenCusType: true,
      tenTable: [],
      tenCustable: [],
      tenWidth: '',
      tenCusWidth: '',
      areartableData: [
        { title: '排名' },
        { title: '供应商名称' },
        { title: '采购额(元)' },
        { title: '金额占比(%)' },
        { title: '是否关联方' },
      ],
      tenCusData: [
        { title: '排名' },
        { title: '客户名称' },
        { title: '销售额(元)' },
        { title: '金额占比(%)' },
        { title: '是否关联方' },
      ],
      loading: false
    }
  },
  props: {
    shareCode: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    },
    isDemo: {
      type: String,
      default: ''
    }
  },
  created() {
    this.loading = true
    if(!this.taskId && !this.shareCode) {
      this.invoiceList = shoperInfo.data
      this.loading= false
    } else {
      this.getReportDetailInvoice()
    }
  },
  watch: {
    invoiceList: {
      handler(val) {
        this.$nextTick(() => {
          if (Object.keys(val).length > 0) {
            // this.areartable = val.unpaidTaxes ? val.unpaidTaxes : []
            this.tenTable = val.paidTaxesDataList
            this.tenCustable = val.redInvoiceInfoDataList
            getTableWidth('.tenCusTable', this.tenCusData.length + 1,this,4).then(res => {
              this.$set(this, 'tenCusWidth', res)
            })
            getTableWidth('.tanTable', this.areartableData.length + 1,this,4).then(res => {
              this.$set(this, 'tenWidth', res)
            })
            // this.addTableSum(this.tableData)
          }
        })
      },
    }
  },
  mounted() {
    if (Object.keys(this.invoiceList).length > 0) {
      this.tableData = this.invoiceList.paidTaxesDataList
      getTableWidth('.tenCusTable', this.tenCusData.length + 1,this,4).then(res => {
        this.tenCusWidth = res
      })
      getTableWidth('.tanTable', this.areartableData.length + 1,this,4).then(res => {
        this.tenWidth = res
      })
      // this.addTableSum(this.tableData)
    }
  },
  methods: {
    addTableSum (table) {
      table && table.forEach(item => {
        item.monthData.push({
          name: '合计',
          type: 0,
          value: item.total || 0
        })
      })
    },
    //获取企业近三年的开票金额
    getReportDetailInvoice() {
      let params = {
        // enterpriseId: this.enterpriseId,
        shareCode: this.shareCode,
        taskId: this.taskId
      }
      gegetEnterpriseInvoiceTopTenApi(params).then(res=> {
        this.invoiceList = res.data
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300px;
  z-index: 3;
}
.w70 {
  width: 55%;
  text-align: left;
  font-size: 24rpx;
  white-space: nowrap;
}
.w30 {
  width: 45%;
  text-align: left;
  font-size: 24rpx;
  white-space: nowrap;
}
.marginL16 {
  margin-left: 16rpx
}
.cardContent {
  box-shadow: none;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-radius: 0 0 15rpx 15rpx;
  margin-top: 0;
}
.title {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin: 10rpx 0;
}
.itemTitle {
  background: #F1F5F9;
  color: #a8a8a8;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 10rpx 16rpx;
}
.uni-card1 {
  background: #fff;
  border-radius: 8upx;
  margin:20upx 0;
}
.data-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8rpx 12rpx; /* 将像素单位换成 rpx */
  border-right: 1rpx solid #ccc; /* 将像素单位换成 rpx */
  border-bottom: 1rpx solid #ccc; /* 将像素单位换成 rpx */
  word-break: break-all;
  word-wrap: break-word;
  line-height: 48rpx; /* 根据需要调整行高，单位为 rpx */
}

.data-cell:last-child {
  border-right: none;
}

</style>